<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/tab.css">
	

</head>
<body>
	<div class="demo">
		<h2>上下滑动tab切换</h2>
		<ul class="tabbtn" id="move-animate-top">

			<li class="current"><a href="#/jquery/items/">jquery 特效</a></li>

			<li><a href="#/js/items/">javascript 特效</a></li>

			<li><a href="#/css3/items/">div+css 教程</a></li>

			<li><a href="#/html5/items/">HTML5 特效</a></li>

		</ul>
		<div class="tabcon" id="topcon">

		<div class="subbox">

			<div class="sublist">

				<ul>

					<li><span>▪</span><a href="#/jquery/table/bgbs/2012-03-21/462.html" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>

					<li><span>▪</span><a href="#/jquery/popup/2012-09-11/755.html" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>

					<li><span>▪</span><a href="#/jquery/popup/2012-06-12/656.html" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>

					<li><span>▪</span><a href="#/jquery/popup/2012-06-01/638.html" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>

					<li><span>▪</span><a href="#/jquery/table/more/2012-03-28/508.html" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>

					<li><span>▪</span><a href="#/jquery/table/more/2012-03-27/506.html" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>

				</ul>

			</div><!--tabcon end-->

			<div class="sublist">

				<ul>

					<li><span>▪</span><a href="#/js/images/more/2012-05-15/608.html" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>

					<li><span>▪</span><a href="#/js/images/qh/2012-03-22/480.html" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>

					<li><span>▪</span><a href="#/js/images/cj/2012-03-14/420.html" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>

					<li><span>▪</span><a href="#/js/images/cj/2011-08-08/110.html" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>

					<li><span>▪</span><a href="#/js/letter/qh/2012-03-18/438.html" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>

					<li><span>▪</span><a href="#/js/letter/ss/2012-03-18/436.html" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>

				</ul>

			</div><!--tabcon end-->



			<div class="sublist">

				<ul>

					<li><span>▪</span><a href="#/css3/layout/2011-10-13/215.html" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>

					<li><span>▪</span><a href="#/css3/layout/2011-02-21/36.html" target="_blank">CSS如何定位工程</a></li>

					<li><span>▪</span><a href="#/css3/menu/2012-03-12/394.html" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>

					<li><span>▪</span><a href="#/css3/menu/2011-09-21/197.html" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>

					<li><span>▪</span><a href="#/css3/css3/2012-03-23/482.html" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>

					<li><span>▪</span><a href="#/css3/css3/2012-03-13/402.html" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>

				</ul>

			</div><!--tabcon end-->

			<div class="sublist">

				<ul>

					<li><span>▪</span><a href="#/html5/tx/2011-08-13/120.html" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>

					<li><span>▪</span><a href="#/html5/tx/2011-02-21/42.html" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>

					<li><span>▪</span><a href="#/html5/tx/2011-02-19/16.html" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>

					<li><span>▪</span><a href="#/html5/tb/2012-03-21/470.html" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>

					<li><span>▪</span><a href="#/jquery/calendar/2012-03-19/450.html" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>

					<li><span>▪</span><a href="#/jquery/rating/2012-06-05/644.html" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>

				</ul>

			</div><!--tabcon end-->

		</div><!--tabcon end-->

	</div>
	<h2>实例2、左右滑动选项卡切换</h2>

	<ul class="tabbtn" id="move-animate-left">

		<li class="current"><a href="#/jquery/items/">jquery 特效</a></li>

		<li><a href="#/js/items/">javascript 特效</a></li>

		<li><a href="#/css3/items/">div+css 教程</a></li>

		<li><a href="#/html5/items/">HTML5 特效</a></li>

	</ul><!--tabbtn end-->

	<div class="tabcon" id="leftcon">

		<div class="subbox">

			<div class="sublist">

				<ul>

					<li><span>▪</span><a href="#/jquery/table/bgbs/2012-03-21/462.html" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>

					<li><span>▪</span><a href="#/jquery/popup/2012-09-11/755.html" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>

					<li><span>▪</span><a href="#/jquery/popup/2012-06-12/656.html" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>

					<li><span>▪</span><a href="#/jquery/popup/2012-06-01/638.html" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>

					<li><span>▪</span><a href="#/jquery/table/more/2012-03-28/508.html" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>

					<li><span>▪</span><a href="#/jquery/table/more/2012-03-27/506.html" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>

				</ul>

			</div><!--tabcon end-->

			<div class="sublist">

				<ul>

					<li><span>▪</span><a href="#/js/images/more/2012-05-15/608.html" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>

					<li><span>▪</span><a href="#/js/images/qh/2012-03-22/480.html" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>

					<li><span>▪</span><a href="#/js/images/cj/2012-03-14/420.html" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>

					<li><span>▪</span><a href="#/js/images/cj/2011-08-08/110.html" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>

					<li><span>▪</span><a href="#/js/letter/qh/2012-03-18/438.html" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>

					<li><span>▪</span><a href="#/js/letter/ss/2012-03-18/436.html" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>

				</ul>

			</div><!--tabcon end-->

			<div class="sublist">

				<ul>

					<li><span>▪</span><a href="#/css3/layout/2011-10-13/215.html" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>

					<li><span>▪</span><a href="#/css3/layout/2011-02-21/36.html" target="_blank">CSS如何定位工程</a></li>

					<li><span>▪</span><a href="#/css3/menu/2012-03-12/394.html" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>

					<li><span>▪</span><a href="#/css3/menu/2011-09-21/197.html" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>

					<li><span>▪</span><a href="#/css3/css3/2012-03-23/482.html" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>

					<li><span>▪</span><a href="#/css3/css3/2012-03-13/402.html" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>

				</ul>

			</div><!--tabcon end-->

			<div class="sublist">

				<ul>

					<li><span>▪</span><a href="#/html5/tx/2011-08-13/120.html" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>

					<li><span>▪</span><a href="#/html5/tx/2011-02-21/42.html" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>

					<li><span>▪</span><a href="#/html5/tx/2011-02-19/16.html" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>

					<li><span>▪</span><a href="#/html5/tb/2012-03-21/470.html" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>

					<li><span>▪</span><a href="#/jquery/calendar/2012-03-19/450.html" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>

					<li><span>▪</span><a href="#/jquery/rating/2012-06-05/644.html" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>

				</ul>

			</div><!--tabcon end-->

		</div><!--tabcon end-->

	</div>

	

	<h2>实例3、淡隐淡现选项卡切换</h2>

	<ul class="tabbtn" id="fadetab">

		<li class="current"><a href="#/jquery/items/">jquery 特效</a></li>

		<li><a href="#/js/items/">javascript 特效</a></li>

		<li><a href="#/css3/items/">div+css 教程</a></li>

		<li><a href="#/html5/items/">HTML5 特效</a></li>

	</ul><!--tabbtn end-->

	<div class="tabcon" id="fadecon">

		<div class="sublist">

			<ul>

				<li><span>▪</span><a href="#/jquery/table/bgbs/2012-03-21/462.html" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>

				<li><span>▪</span><a href="#/jquery/popup/2012-09-11/755.html" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>

				<li><span>▪</span><a href="#/jquery/popup/2012-06-12/656.html" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>

				<li><span>▪</span><a href="#/jquery/popup/2012-06-01/638.html" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>

				<li><span>▪</span><a href="#/jquery/table/more/2012-03-28/508.html" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>

				<li><span>▪</span><a href="#/jquery/table/more/2012-03-27/506.html" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>

			</ul>

		</div><!--tabcon end-->

		<div class="sublist">

			<ul>

				<li><span>▪</span><a href="#/js/images/more/2012-05-15/608.html" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>

				<li><span>▪</span><a href="#/js/images/qh/2012-03-22/480.html" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>

				<li><span>▪</span><a href="#/js/images/cj/2012-03-14/420.html" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>

				<li><span>▪</span><a href="#/js/images/cj/2011-08-08/110.html" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>

				<li><span>▪</span><a href="#/js/letter/qh/2012-03-18/438.html" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>

				<li><span>▪</span><a href="#/js/letter/ss/2012-03-18/436.html" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>

			</ul>

		</div><!--tabcon end-->

		<div class="sublist">

			<ul>

				<li><span>▪</span><a href="#/css3/layout/2011-10-13/215.html" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>

				<li><span>▪</span><a href="#/css3/layout/2011-02-21/36.html" target="_blank">CSS如何定位工程</a></li>

				<li><span>▪</span><a href="#/css3/menu/2012-03-12/394.html" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>

				<li><span>▪</span><a href="#/css3/menu/2011-09-21/197.html" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>

				<li><span>▪</span><a href="#/css3/css3/2012-03-23/482.html" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>

				<li><span>▪</span><a href="#/css3/css3/2012-03-13/402.html" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>

			</ul>

		</div><!--tabcon end-->

		<div class="sublist">

			<ul>

				<li><span>▪</span><a href="#/html5/tx/2011-08-13/120.html" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>

				<li><span>▪</span><a href="#/html5/tx/2011-02-21/42.html" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>

				<li><span>▪</span><a href="#/html5/tx/2011-02-19/16.html" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>

				<li><span>▪</span><a href="#/html5/tb/2012-03-21/470.html" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>

				<li><span>▪</span><a href="#/jquery/calendar/2012-03-19/450.html" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>

				<li><span>▪</span><a href="#/jquery/rating/2012-06-05/644.html" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>

			</ul>

		</div><!--tabcon end-->

	</div><!--tabcon end-->

	

	<h2>实例4、默认选项卡切换</h2>

	<ul class="tabbtn" id="normaltab">

		<li class="current"><a href="#/jquery/items/">jquery 特效</a></li>

		<li><a href="#/js/items/">javascript 特效</a></li>

		<li><a href="#/css3/items/">div+css 教程</a></li>

		<li><a href="#/html5/items/">HTML5 特效</a></li>

	</ul><!--tabbtn end-->

	<div class="tabcon" id="normalcon">

		<div class="sublist">

			<ul>

				<li><span>▪</span><a href="#/jquery/table/bgbs/2012-03-21/462.html" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>

				<li><span>▪</span><a href="#/jquery/popup/2012-09-11/755.html" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>

				<li><span>▪</span><a href="#/jquery/popup/2012-06-12/656.html" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>

				<li><span>▪</span><a href="#/jquery/popup/2012-06-01/638.html" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>

				<li><span>▪</span><a href="#/jquery/table/more/2012-03-28/508.html" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>

				<li><span>▪</span><a href="#/jquery/table/more/2012-03-27/506.html" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>

			</ul>

		</div><!--tabcon end-->

		<div class="sublist">

			<ul>

				<li><span>▪</span><a href="#/js/images/more/2012-05-15/608.html" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>

				<li><span>▪</span><a href="#/js/images/qh/2012-03-22/480.html" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>

				<li><span>▪</span><a href="#/js/images/cj/2012-03-14/420.html" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>

				<li><span>▪</span><a href="#/js/images/cj/2011-08-08/110.html" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>

				<li><span>▪</span><a href="#/js/letter/qh/2012-03-18/438.html" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>

				<li><span>▪</span><a href="#/js/letter/ss/2012-03-18/436.html" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>

			</ul>

		</div><!--tabcon end-->

		<div class="sublist">

			<ul>

				<li><span>▪</span><a href="#/css3/layout/2011-10-13/215.html" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>

				<li><span>▪</span><a href="#/css3/layout/2011-02-21/36.html" target="_blank">CSS如何定位工程</a></li>

				<li><span>▪</span><a href="#/css3/menu/2012-03-12/394.html" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>

				<li><span>▪</span><a href="#/css3/menu/2011-09-21/197.html" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>

				<li><span>▪</span><a href="#/css3/css3/2012-03-23/482.html" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>

				<li><span>▪</span><a href="#/css3/css3/2012-03-13/402.html" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>

			</ul>

		</div><!--tabcon end-->

		<div class="sublist">

			<ul>

				<li><span>▪</span><a href="#/html5/tx/2011-08-13/120.html" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>

				<li><span>▪</span><a href="#/html5/tx/2011-02-21/42.html" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>

				<li><span>▪</span><a href="#/html5/tx/2011-02-19/16.html" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>

				<li><span>▪</span><a href="#/html5/tb/2012-03-21/470.html" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>

				<li><span>▪</span><a href="#/jquery/calendar/2012-03-19/450.html" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>

				<li><span>▪</span><a href="#/jquery/rating/2012-06-05/644.html" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>

			</ul>

		</div><!--tabcon end-->

	</div><!--tabcon end-->
	</div>
	<script src="js/jquery-1.7.2.js"></script>
	<script src="js/jquery.tabso_yeso.js"></script>
	<script src="js/tab.js"></script>
</body>
</html>